<template>
  <section class="home-main base-main pr" v-wechat-title="title">
    <!--<pull-up-reload-->
      <!--:on-infinite-load="onInfiniteLoad"-->
      <!--:parent-pull-up-state="infiniteLoadData.pullUpState"-->
      <!--style="padding-bottom: 0px;">-->

      <new-pull-up-reload
        @reloadData="reloadData"
        :canPull="canGetMore"
        style="padding-bottom: 0px;">

    <!--顶部搜索栏-->
    <div class="search-box bgcFFF">
      <van-row>
        <van-col span="4">
          <img src="../../assets/img/icon_logo.png" alt="">
        </van-col>
        <van-col span="16">
          <p class="search-c" @click="toSearch">
            <span>
              <i class="fs14 iconfont iconsousuo1"></i>
              搜索商品
            </span>
          </p>
        </van-col>
        <van-col span="4">
          <div class="search-r">
            <i class="iconfont iconzhanneixinx"></i>
            <i class="iconfont iconchazhao" @click="handleToClassify"></i>
          </div>
        </van-col>
      </van-row>
    </div>
    <!--顶部搜索栏-->

    <!--轮播-->
    <div class="swipe-main" style="height:auto">
      <SwipeImg :imgList="imgList" :autoplay="autoPlay"></SwipeImg>
    </div>
    <!--轮播-->

    <!--菜单-->
    <div class="nav-main bgcFFF">
      <van-row>
        <van-col span="6">
          <span class="nav-item" @click="handleNav(1)">
            <img src="../../assets/img/icon_nav_1.png" alt="">
            <span>限时抢购</span>
          </span>
        </van-col>
        <van-col span="6">
          <span class="nav-item" @click="handleNav(2)">
            <img src="../../assets/img/icon_nav_2.png" alt="">
            <span>拼单专区</span>
          </span>
        </van-col>
        <van-col span="6">
          <span class="nav-item" @click="handleNav(3)">
            <img src="../../assets/img/icon_nav_3.png" alt="">
            <span>积分签到</span>
          </span>
        </van-col>
        <van-col span="6">
          <span class="nav-item" @click="handleNav(4)">
            <img src="../../assets/img/icon_nav_4.png" alt="">
            <span>孝心传递</span>
          </span>
        </van-col>
      </van-row>
    </div>
    <!--菜单-->

    <!--banner1-->
    <div class="banner-one bgcFFF" v-if="banner1">
      <img v-lazy="banner1" alt="广告">
    </div>
    <!--banner1-->

    <!--秒杀-->
    <div class="seckill-main mt10 bgcFFF">
      <van-row>
        <van-col span="12">
          <div class="seckill-l">
            <div class="box-one line-right pr">
              <p class="color7A7B82">
                <img src="../../assets/img/icon_seckill_title.png" alt="秒杀">
                好货秒不停
              </p>
              <p>
                <span>{{hour}}</span> :
                <span>{{minute}}</span> :
                <span>{{second}}</span>
              </p>
              <p class="pa">
                <img v-lazy="seckillData[0].src" alt="">
              </p>
              <img class="seckill-none pa" src="../../assets/img/icon_seckill_none.png" alt="秒杀产品">
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="seckill-r">
            <div class="box-tow line-bottom pr">
              <p class="colorF87676">3D塑身运动机</p>
              <p>每天健康运动</p>
              <p class="pa">
                <img v-lazy="seckillData[1].src" alt="">
              </p>
              <img class="seckill-none pa" src="../../assets/img/icon_seckill_none.png" alt="秒杀产品">
            </div>
            <div class="box-three pr">
              <p class="colorBD8FF5">3D塑身运动机</p>
              <p>每天健康运动</p>
              <p class="pa">
                <img v-lazy="seckillData[2].src" alt="">
              </p>
              <img class="seckill-none pa" src="../../assets/img/icon_seckill_none.png" alt="秒杀产品">
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <!--秒杀-->

    <!--banner2-->
    <div class="banner-two mt10">
      <div class="banner-img-box bgcFFF" v-for="(src, index) in banner2">
        <img v-lazy="src" alt="广告">
      </div>
    </div>
    <!--banner2-->

    <!--推荐产品-->
    <div class="recommend-products bgcFFF">
      <div class="title-p text-c line-bottom">
        推荐产品
      </div>
      <ul class="img-box">
        <li class="line-right line-bottom" v-for="(item, index) in recommendData">
          <img v-lazy="item.src" alt="产品图片">
        </li>
      </ul>
    </div>
    <!--推荐产品-->

    <!--banner3-->
    <div class="banner-three bgcFFF mt10">
      <img v-lazy="banner3" alt="广告">
    </div>
    <!--banner3-->

    <!--热卖产品-->
    <div class="hot-sale-products mt10 bgcFFF">
      <div class="title-p text-c line-bottom">
        热卖产品
      </div>
      <Product :productData="productData" @getProductId="getProductId"></Product>
    </div>
    <!--热卖产品-->
    <!--</pull-up-reload>-->
    </new-pull-up-reload>

    <!--<div class="is-none-pop text-c fs12">-->
      <!--<span>————</span> 我是有底线的 <span>————</span>-->
    <!--</div>-->

    <div style="height: 50px;"></div>

    <Tabbar  @tabberSelected="tabberSelected" :activeNum="active"></Tabbar>
    <Loading :show="isLoading"></Loading>

    <div class="prompt-win" v-if="isShowPop">
      <div class="win-box bgcFFF absolute-center text-c">
        <img src="../../assets/img/icon_group_booking.png" alt="">
        <p class="fs16 color45454D">活动尚未开始</p>
        <p class="fs12">敬请期待~</p>
        <p class="text-c btn">
          <span class="fs15 text-c inline-block" @click.stop="isShowPop = false">我知道了</span>
        </p>
      </div>
    </div>

    <DevelopmentOffline
      :show="isDevelopmentOffline"
      :userData="userData"
      @handleBuy="handleBuy"
      @handleCancel="handleCancel"
    ></DevelopmentOffline>

    <FirstCome
      :isFirst="isFirst"
      @closeWin="closeWin"
      @toLook="toLook"
    ></FirstCome>

    <NewUserAndShareSignActive
      @topage="topage"
      showType="1"
      :styleObj="styleObj"/>
  </section>
</template>

<script type="text/ecmascript-6">
  import SwipeImg from '../../components/SwipeImg'
  import Product from '../../components/ProductList.vue'
  import PullUpReload from '../../components/PullUpReload.vue'
  import NewPullUpReload from '../../components/NewPullUpReload.vue'
  import Tabbar from '../../components/Tabbar.vue'
  import Loading from '../../components/Loading.vue'
  import ActiveSharePopW from '../../components/ActiveSharePopW.vue'
  import DevelopmentOffline from '../../components/DevelopmentOffline.vue'
  import FirstCome from '../../components/FirstCome.vue'
  import NewUserAndShareSignActive from '../../components/NewUserAndShareSignActive.vue'

  import { tabChange } from '../../assets/js/utils'
  import api from '../../http/api';


  import swiper1 from '../../assets/img/swiper1.png';
  import swiper2 from '../../assets/img/banner1.png';
  import banner1 from '../../assets/img/banner1.png';
  import banner2 from '../../assets/img/banner2.png';
  import banner3 from '../../assets/img/banner3.png';
  import recommend1 from '../../assets/img/recommend1.png';
  import recommend2 from '../../assets/img/recommend2.png';
  import recommend3 from '../../assets/img/recommend3.png';
  import recommend4 from '../../assets/img/recommend4.png';
  import product1 from '../../assets/img/product1.png';
  import product2 from '../../assets/img/product2.png';
  import product3 from '../../assets/img/product3.png';
  import seckill1 from '../../assets/img/seckill1.png';
  import seckill2 from '../../assets/img/seckill2.png';
  import seckill3 from '../../assets/img/seckill3.png';


  export default {
    components: {
      SwipeImg,Product,PullUpReload,Tabbar,Loading,ActiveSharePopW,DevelopmentOffline,FirstCome,
      NewUserAndShareSignActive,NewPullUpReload
    },
    data() {
      return  {
        title:'',
        active:0,
        isLoading: false,
        imgList:[
          swiper1,
          swiper2
        ],//轮播图数组
        autoPlay:3000,//轮播图自动播放间隔
        banner1:banner1,//banner1
        banner2:[
          banner2,],//banner2
        recommendData:[
          {src:recommend1},
          {src:recommend2},
          {src:recommend3},
          {src:recommend4},
        ],//推荐产品
        banner3: banner3,//banner3
        productData:[
          {
            id:1,
            src:product1,
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:1,
            typeText:'产品上新',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:2,
            src:product2,
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:3,
            src:product3,
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:4,
            src:product1,
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:5,
            src:product2,
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:1,
            typeText:'产品上新',
            price:'268.00',
            sellNum:'2654'
          },
          {
            id:6,
            src:product3,
            name:'产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字产品名称最多两行字多余的文字',
            model:'SF-608 腰椎治疗仪',
            type:2,
            typeText:'满500减100',
            price:'268.00',
            sellNum:'2654'
          },
        ],  //热卖产品
        seckillData:[
          {
            src:seckill1,
          },
          {
            src:seckill2,
          },
          {
            src:seckill3,
          },
        ],//秒杀
        day:0,//天数
        hour:0,//小时
        minute:0,//分钟
        second:0,//秒
        time:'2021/5/10 12:00:00',//倒计时时间
        isShowPop:false,
        isDevelopmentOffline:false,//成为下线弹窗
        userData:{
          nikename:'微信昵称SDK合法流口水的会发生的会发生大发',
          phone:'13698545214'
        },//上线用户信息
        isFirst:false,//是否是第一次进入商城
        styleObj: {
          right: '20px',
          top: '60%',
          width: '66px',
          height: '72px',
        },

        page:0,
        // 上拉加载的设置
        infiniteLoadData: {
          initialShowNum: 3, // 初始显示多少条
          everyLoadingNum: 3, // 每次加载的个数
          pullUpState: 0, // 子组件的pullUpState状态
          pullUpList: [], // 上拉加载更多数据的数组
          showPullUpListLength: this.initialShowNum // 上拉加载后所展示的个数
        },
        canGetMore: true,
      }
    },
    created(){
      this.title="111"
//      this.isLoading = true;
      this.initData();
      this.countDown(this.time)
      this.$nextTick(function(){
        $('.img-box').children('li').eq(1).removeClass('line-right');
        $('.img-box').children('li').eq(2).removeClass('line-bottom');
        $('.img-box').children('li').eq(3).removeClass('line-bottom line-right');

        setTimeout(() => {
//          this.isLoading = false;
        },5000)
      })
    },
    methods: {
      reloadData() {
        console.log('触发加载更多');
        this.initData('more')
      },
      topage(type) {
        this.$router.push({
          name: type
        })
      },

      initData(more){
        this.$ajax({
          url:api.IndexInfo,
          method:'get',
        }).then(res => {
//          this.isLoading = false;
//          let data = res.data.content;
//          this.imgList = data.adver
//          this.productData = data.hotsale
//          this.recommendData = data.recommend

          if(more) {
            if(this.productData.length >= 20) {
              this.canGetMore = false
            } else {
              this.productData = this.productData.concat(this.productData)
            }
          }
        });
      },
      //立即购买
      handleBuy(){
        console.log('handleBuy-');
        this.isDevelopmentOffline = false
      },
      //取消推荐
      handleCancel(){
        console.log('handleCancel-');
        this.isDevelopmentOffline = false
      },
      tabberSelected(val){
        this.$router.push({
          path:tabChange(val),
        })
      },
      //分类页跳转
      handleToClassify(){
        this.$router.push({
          path:'/index/web/classify'
        })
      },
      //搜索页跳转
      toSearch(){
        console.log('search--');
        this.$router.push({
          path:'/index/web/search'
        })
      },
      //菜单栏跳转
      handleNav(index){
        console.log('index---', index);
        if(index == 2){
          this.isShowPop = true
        }
      },
      //点击的产品id，跳转到产品详情页
      getProductId(obj){
        this.$router.push({
          path:'/index/web/productDetail',
          query:{id:obj.id}
        })
      },
      //倒计时
      countDown(timer){
        let oDate = new Date();//获取日期对象
        let oldTime = oDate.getTime();//现在距离1970年的毫秒数
        let newDate = new Date(timer);
        let newTime = newDate.getTime();//2019年距离1970年的毫秒数
        let second = Math.floor((newTime - oldTime) / 1000);//未来时间距离现在的秒数
        let day = Math.floor(second / 86400);//整数部分代表的是天；一天有24*60*60=86400秒 ；
        second = second % 86400;//余数代表剩下的秒数；
        let hour = Math.floor(second / 3600);//整数部分代表小时；
        second %= 3600; //余数代表 剩下的秒数；
        let minute = Math.floor(second / 60);
        second %= 60;
        this.day = this.formattingTime(day);
        this.hour = this.formattingTime(hour);
        this.minute = this.formattingTime(minute);
        this.second = this.formattingTime(second);
      },
      formattingTime(n){
        return n >= 0 && n < 10 ? '0' + n : '' + n;
      },
      closeWin(){
        this.isFirst = false;
      },
      toLook(){
//        this.$router.push({
//
//        })
      },
      // 上拉加载
      onInfiniteLoad (done) {
        if (this.infiniteLoadData.pullUpState === 0) {
//          this.getPullUpMoreData()
        }
        done()
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/css/home";
</style>
